<template>
  <el-row :gutter="16" justify="space-left">
    <el-col :span="4">
      <div class="statistic-card">
        <el-statistic :value="dbPoolInfo.completedSize">
          <template #title>
            <div style="display: inline-flex; align-items: center">
              历史执行
              <el-tooltip
                effect="dark"
                content="本次启动后线程池执行完成的数量"
                placement="top-start"
              >
                <el-icon style="margin-left: 4px" :size="12">
                  <Warning />
                </el-icon>
              </el-tooltip>
            </div>
          </template>
        </el-statistic>

        <div class="statistic-footer">
          <div class="footer-item">
            <span>比上秒</span>
            <span v-if="dbPoolInfo.completedSizeThenBefore >= 0" class="green">
              {{ dbPoolInfo.completedSizeThenBefore }}
              <el-icon>
                <CaretTop />
              </el-icon>
            </span>
            <span v-if="dbPoolInfo.completedSizeThenBefore < 0" class="red">
              {{ dbPoolInfo.completedSizeThenBefore }}
              <el-icon>
                <CaretBottom />
              </el-icon>
            </span>
          </div>
        </div>
      </div>
    </el-col>

    <el-col :span="4">
      <div class="statistic-card">
        <el-statistic :value="dbPoolInfo.activeSize">
          <template #title>
            <div style="display: inline-flex; align-items: center">
              正在执行
              <el-tooltip
                effect="dark"
                content="当前线程池正在执行的数量"
                placement="top"
              >
                <el-icon style="margin-left: 4px" :size="12">
                  <Warning />
                </el-icon>
              </el-tooltip>
            </div>
          </template>
        </el-statistic>
        <div class="statistic-footer">
          <div class="footer-item">
            <span>比上秒</span>
            <span v-if="dbPoolInfo.activeSizeThenBefore >= 0" class="green">
              {{ dbPoolInfo.activeSizeThenBefore }}
              <el-icon>
                <CaretTop />
              </el-icon>
            </span>
            <span v-if="dbPoolInfo.activeSizeThenBefore < 0" class="red">
              {{ dbPoolInfo.activeSizeThenBefore }}
              <el-icon>
                <CaretBottom />
              </el-icon>
            </span>
          </div>
        </div>
      </div>
    </el-col>

    <el-col :span="4">
      <div class="statistic-card">
        <el-statistic
          :value="dbPoolInfo.waitingSize"
          title="New transactions today"
        >
          <template #title>
            <div style="display: inline-flex; align-items: center">
              等待队列
              <el-tooltip
                effect="dark"
                content="还未放入线程池的任务数"
                placement="top"
              >
                <el-icon style="margin-left: 4px" :size="12">
                  <Warning />
                </el-icon>
              </el-tooltip>
            </div>
          </template>
        </el-statistic>
        <div class="statistic-footer">
          <div class="footer-item">
            <span>比上秒</span>
            <span v-if="dbPoolInfo.waitingSizeThenBefore >= 0" class="green">
              {{ dbPoolInfo.waitingSizeThenBefore }}
              <el-icon>
                <CaretTop />
              </el-icon>
            </span>
            <span v-if="dbPoolInfo.waitingSizeThenBefore < 0" class="red">
              {{ dbPoolInfo.waitingSizeThenBefore }}
              <el-icon>
                <CaretBottom />
              </el-icon>
            </span>
          </div>
        </div>
      </div>
    </el-col>

    <el-col :span="4">
      <div class="statistic-card">
        <el-statistic
          :value="dbPoolInfo.doingSize"
          title="New transactions today"
        >
          <template #title>
            <div style="display: inline-flex; align-items: center">
              执行队列
              <el-tooltip
                effect="dark"
                content="已经放入线程池的任务数"
                placement="top"
              >
                <el-icon style="margin-left: 4px" :size="12">
                  <Warning />
                </el-icon>
              </el-tooltip>
            </div>
          </template>
        </el-statistic>
        <div class="statistic-footer">
          <div class="footer-item">
            <span>比上秒</span>
            <span v-if="dbPoolInfo.doingSizeThenBefore >= 0" class="green">
              {{ dbPoolInfo.doingSizeThenBefore }}
              <el-icon>
                <CaretTop />
              </el-icon>
            </span>
            <span v-if="dbPoolInfo.doingSizeThenBefore < 0" class="red">
              {{ dbPoolInfo.doingSizeThenBefore }}
              <el-icon>
                <CaretBottom />
              </el-icon>
            </span>
          </div>
        </div>
      </div>
    </el-col>

    <el-col :span="4">
      <div class="statistic-card">
        <el-statistic
          :value="dbPoolInfo.coreSize + '/' + dbPoolInfo.maxSize"
          title="New transactions today"
        >
          <template #title>
            <div style="display: inline-flex; align-items: center">
              核心/最大线程
              <el-tooltip
                effect="dark"
                content="线程池核心/最大线程数"
                placement="top"
              >
                <el-icon style="margin-left: 4px" :size="12">
                  <Warning />
                </el-icon>
              </el-tooltip>
            </div>
          </template>
        </el-statistic>
      </div>
    </el-col>

    <el-col :span="4">
      <div class="statistic-card">
        <el-statistic
          :value="dbPoolInfo.serveTime"
          title="New transactions today"
        >
          <template #title>
            <div style="display: inline-flex; align-items: center">
              当前时间
              <el-tooltip
                effect="dark"
                content="服务器当前时间"
                placement="top-end"
              >
                <el-icon style="margin-left: 4px" :size="12">
                  <Warning />
                </el-icon>
              </el-tooltip>
            </div>
          </template>
        </el-statistic>
        <div class="statistic-footer">
          <div class="footer-item">
            <span>{{ dbPoolInfo.serveDate }}</span>
          </div>
        </div>
      </div>
    </el-col>
  </el-row>

  <el-table class="eventable" :data="dbPoolInfo.eventData" height="440" stripe>
    <el-table-column
      :min-width="item.width"
      :prop="item.prop"
      :label="item.label"
      v-for="(item, index) in options"
      :key="index"
    >
      <template v-slot="{ row }" v-if="item.prop === 'queueStatus'">
        <div v-if="row.queueStatus === 'Waiting'">
          <el-button
            type="info"
            :icon="Files"
            plain
            style="pointer-events: none"
            >排队中</el-button
          >
        </div>
        <div v-else-if="row.queueStatus === 'Doing'">
          <el-button type="warning" loading plain style="pointer-events: none"
            >执行中</el-button
          >
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import { getEventQueue } from '@/api/config'
import { options } from './options'
import { Files } from '@element-plus/icons-vue'
import { ref, onBeforeUnmount } from 'vue'
import { CaretBottom, CaretTop, Warning } from '@element-plus/icons-vue'

// 线程池信息
const dbPoolInfo = ref({
  completedSize: 0,
  completedSizeThenBefore: 0,
  activeSize: 0,
  activeSizeThenBefore: 0,
  waitingSize: 0,
  waitingSizeThenBefore: 0,
  doingSize: 0,
  doingSizeThenBefore: 0,
  coreSize: 0,
  maxSize: 0,
  serveDate: '',
  serveTime: '',
  eventData: []
})

const initEventQueueInfo = async () => {
  const res = await getEventQueue()
  dbPoolInfo.value = res
}
initEventQueueInfo()

const timer = setInterval(() => {
  initEventQueueInfo()
}, 1000)

onBeforeUnmount(() => {
  clearInterval(timer)
})
</script>

<style scoped>
.eventable {
  width: 100%;
  margin-top: 10px;
  margin-left: 5px;
  margin-right: 5px;
}

:global(h2#card-usage ~ .example .example-showcase) {
  background-color: var(--el-fill-color) !important;
}

.el-statistic {
  --el-statistic-content-font-size: 28px;
}

.statistic-card {
  height: 100%;
  padding: 20px;
  border-radius: 6px;
  background-color: var(--el-bg-color-overlay);
  box-shadow: 0 1px 2px rgba(26, 26, 26, 0.1);
}

.statistic-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--el-text-color-regular);
  margin-top: 14px;
}

.statistic-footer .footer-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.statistic-footer .footer-item span:last-child {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
}

.green {
  color: var(--el-color-success);
}
.red {
  color: var(--el-color-error);
}
</style>
